<template>
  <div>
    <a-collapse v-model="activeKey" expand-icon-position="right">
      <a-collapse-panel key="1" header="基本信息">
        <div class="set_item d-flex ai-center">
          <div class="label">
            页面名称
            <div class="require"></div>
          </div>
          <div class="flex-1">
            <a-input v-model="title" />
          </div>
        </div>
        <div class="set_item d-flex">
          <div class="label">页面备注</div>
          <div class="flex-1">
            <a-input type="textarea" style="height: 100px" v-model="remark" />
          </div>
        </div>
      </a-collapse-panel>
      <a-collapse-panel key="2" header="分享信息">
        <div class="set_item d-flex ai-center">
          <div class="label">分享标题</div>
          <div class="flex-1">
            <a-input v-model="shareTitle" />
          </div>
        </div>
        <div class="set_item d-flex">
          <div class="label">分享描述</div>
          <div class="flex-1">
            <a-input
              type="textarea"
              style="height: 100px"
              v-model="shareDesc"
            />
          </div>
        </div>
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      activeKey: ["1"],
      title: "",
      remark: "",
      shareTitle: "",
      shareDesc: "",
    };
  },
  watch: {
    //页面标题
    title(newTitle) {
      this.setPageProps({
        type: "base",
        name: "title",
        value: newTitle,
      });
    },
    //备注
    remark(newRemark) {
      this.setPageProps({
        type: "base",
        name: "remark",
        value: newRemark,
      });
    },
    shareTitle(newShareTitle) {
      this.setPageProps({
        type: "share",
        name: "shareTitle",
        value: newShareTitle,
      });
    },
    shareDesc(newShareDesc) {
      this.setPageProps({
        type: "share",
        name: "shareDesc",
        value: newShareDesc,
      });
    },
  },
  methods: {
    ...mapMutations(["setPageProps"]),
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.set_item {
  font-size: 12px;
  margin-bottom: 20px;
  .label {
    min-width: 60px;
    height: 30px;
    line-height: 30px;
    position: relative;
    margin-right: 5px;
    .require {
      position: absolute;
      width: 5px;
      height: 5px;
      background: red;
      border-radius: 50%;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto 0;
    }
  }
}
.ant-collapse {
  border: none;
}
.ant-collapse-item {
  border: none;
  background: #eef0f4;
  margin: 10px;
  border-radius: 4px;
}
::v-deep .ant-collapse-item > .ant-collapse-content {
  background-color: #f8f9fa !important;
  border: none;
}
::v-deep .ant-collapse-item > .ant-collapse-header {
  font-size: 14px;
  color: #595961;
  font-weight: 600;
}
</style>